<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@include file="../base/base.jspf" %>
<html>
<head>
    <meta charset="utf-8">
    <title>权限管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div style="padding: 20px; ">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md5">
            <div class="layui-card" style="height: calc( 100% - 40px);">
                <div class="layui-card-header">权限树</div>
                <div class="layui-card-body">
                    <ul id="resource-resourcePage-ztree" class="ztree" style="margin-left: 30%;"></ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md7" style="display: none;position: fixed; right: 0;    height: 100%;" id="resource-resourcePage-model">
            <div class="layui-card" style="height: calc( 100% - 26px);">
                <div class="layui-card-header" id="resource-resourcePage-title"></div>
                <div class="layui-card-body">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <form class="layui-form" id="resource-resourcePage-form"
                                  lay-filter="component-form-element">
                                <input type="hidden" name="id" id="resource-resourcePage-id"/>
                                <input type="hidden" name="pId" id="resource-resourcePage-pId"/>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">上一级：</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="resource-resourcePage-pName" class="layui-input"
                                               readonly="readonly"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">权限名称：</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="resource-resourcePage-name" name="name"
                                               lay-verify="required"
                                               placeholder="请输入权限名称" autocomplete="off" class="layui-input"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">排序：</label>
                                    <div class="layui-input-block">
                                        <input type="number" id="resource-resourcePage-resOrder" name="resOrder"
                                               lay-verify="required"
                                               placeholder="请输入排序号" autocomplete="off" class="layui-input"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">权限类型：</label>
                                    <div class="layui-input-block ">
                                        <select name="resType" id="resource-resourcePage-resType">
                                            <c:forEach var="resType" items="${resTypes}">
                                                <option value="${resType.key}">${resType.value}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">权限图标：</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="resource-resourcePage-icon" name="icon"
                                               placeholder="请输入权限图标" autocomplete="off" class="layui-input"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">权限链接：</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="resource-resourcePage-resPath" name="resPath"
                                               placeholder="请输入权限链接" autocomplete="off" class="layui-input"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">是否启用：</label>
                                    <div class="layui-input-block" id="resource-resourcePage-status">
                                        <input type="radio" name="status" value="1" title="是" checked="checked">
                                        <input type="radio" name="status" value="0" title="否">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">权限描述：</label>
                                    <div class="layui-input-block" id="">
                                        <textarea id="resource-resourcePage-description" name="description"
                                                  placeholder="" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit
                                                lay-filter="component-form-element">提交
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    layui.config({
        base: "${ctx}/static/framework/layuiadmin/" //静态资源所在路径
    }).extend({
        index: "lib/index" //主入口模块
    }).use(["index", "form"], function () {
        var form = layui.form;
        form.on("submit(component-form-element)", function (data) {
            $.ajax({
                async: false,
                url: "${ctx}/resource/resourceSubmit",
                type: "post",
                dataType: "json",
                data: data.field,
                success: function (json) {
                    if (json.result) {
                        showTree();
                        success(json.info);
                        var node, title = $("#resource-resourcePage-title").text();
                        if (title.indexOf("新增") > 0) {
                            node = zTree.getNodeByParam("id", json.obj, null);
                            zTree.selectNode(node);
                            node = zTree.getNodeByParam("id", node.pId, null);
                            zTree.expandNode(node, true, false, true, false);
                        } else if (title.indexOf("修改") > 0) {
                            node = zTree.getNodeByParam("id", data.field.id, null);
                            zTree.selectNode(node);
                            node = zTree.getNodeByParam("id", node.pId, null);
                            zTree.expandNode(node, true, false, true, false);
                        }
                        $("#resource-resourcePage-model").addClass("no-display");
                    } else {
                        error(json.info);
                    }
                }
            });
        });
        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false,
                editNameSelectAll: true,
                drag: {
                    prev: true,
                    next: true,
                    inner: true,
                    isCopy: false,
                    isMove: false
                }
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.id).unbind().remove();
            if (treeNode.id != "0") {
                $("#editBtn_" + treeNode.id).unbind().remove();
                if (!treeNode.isParent) {
                    $("#deleteBtn_" + treeNode.id).unbind().remove();
                }
            }
        };
        var zTree;
        showTree();
        zTree.expandNode(zTree.getNodes()[0], true, false, false, false);

        function showTree() {
            $.ajax({
                async: false,
                url: "${ctx}/resource/getResTree",
                type: "post",
                dataType: "json",
                success: function (data) {
                    $.fn.zTree.init($("#resource-resourcePage-ztree"), setting, data);
                    zTree = $.fn.zTree.getZTreeObj("resource-resourcePage-ztree");
                }
            });
        }

        // 打开权限新增
        function openAddResInit(treeNode) {
            $("#resource-resourcePage-id").val("");
            $("#resource-resourcePage-form")[0].reset();
            var id = treeNode.id;
            $.ajax({
                async: true,
                url: "${ctx}/resource/resAddInit",
                type: "post",
                dataType: "json",
                data: {
                    id: id
                },
                success: function (data) {
                    $("#resource-resourcePage-title").text("权限新增");
                    if (data) {
                        $("#resource-resourcePage-pId").val(id);
                        $("#resource-resourcePage-pName").val(data.info);
                        $("#resource-resourcePage-resOrder").val(data.obj);
                    }
                    $("#resource-resourcePage-model").css("display", "block");
                }
            });
        }

        // 打开修改权限
        function openEditResInit(treeNode) {
            $("#resource-resourcePage-form")[0].reset();
            $("#resource-resourcePage-title").text("权限修改");
            $("#resource-resourcePage-id").val(treeNode.id);
            $("#resource-resourcePage-pId").val(treeNode.pId);
            $("#resource-resourcePage-name").val(treeNode.name);
            $("#resource-resourcePage-resOrder").val(treeNode.resOrder);
            $("#resource-resourcePage-resType").val(treeNode.resType);
            $("#resource-resourcePage-resPath").val(treeNode.resPath);
            $("#resource-resourcePage-description").val(treeNode.description);
            $.ajax({
                async: true,
                url: "${ctx}/resource/resEditInit",
                type: "post",
                dataType: "json",
                data: {
                    id: treeNode.id
                },
                success: function (data) {
                    if (data) {
                        var status = data.status;
                        if (status == "1") {
                            $("#resource-resourcePage-status input[name='status']:eq(0)").attr("checked", true);
                            $("#resource-resourcePage-status input[name='status']:eq(1)").attr("checked", false);
                        } else {
                            $("#resource-resourcePage-status input[name='status']:eq(0)").attr("checked", false);
                            $("#resource-resourcePage-status input[name='status']:eq(1)").attr("checked", true);
                        }
                        $("#resource-resourcePage-icon").val(data.icon);
                        $("#resource-resourcePage-pName").val(data.pName);
                    }
                    $("#resource-resourcePage-model").css("display", "block");
                }
            });
        }

        function deleteRes(treeNode) {
            layer.confirm("您确定要删除该权限吗？", {
                icon: 3,
                title: "提示",
                btn: ["确定", "取消"] //按钮
            }, function () {
                $.ajax({
                    async: true,
                    url: "${ctx}/resource/resDelete",
                    type: "post",
                    dataType: "json",
                    data: {
                        id: treeNode.id
                    },
                    success: function (data) {
                        if (data.result) {
                            success(data.info);
                            var zTree = $.fn.zTree.getZTreeObj("resource-resourcePage-ztree");
                            zTree.selectNode(zTree.getNodeByParam("id", treeNode.pId, null));
                            zTree.removeNode(treeNode);
                        } else {
                            error(data.info);
                        }
                    }
                });
            }, function (index) {
                layer.close(index);
            });
        }

        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if ($("#addBtn_" + treeNode.id).length > 0)
                return;// 防止一次添加多个
            var addStr = "<span class=\"button add\" id=\"addBtn_" + treeNode.id
                + "\" title=\"添加权限\" onfocus=\"this.blur();\"></span>";
            if (treeNode.id != "00000000") {
                var editStr = "<span class=\"button edit\"  id=\"editBtn_"
                    + treeNode.id
                    + "\" title=\"修改权限\" onfocus=\"this.blur();\"></span>";
                if (!treeNode.isParent) {
                    var deleteStr = "<span class=\"button remove\" id=\"deleteBtn_"
                        + treeNode.id
                        + "\" title=\"删除权限\" onfocus=\"this.blur();\"></span>";
                    sObj.after(deleteStr);
                    sObj.after(editStr);
                    var deleteBtn = $("#deleteBtn_" + treeNode.id);
                    if (deleteBtn)
                        deleteBtn.bind("click", function () {
                            deleteRes(treeNode);
                        });
                } else {
                    sObj.after(editStr);
                }
                var editBtn = $("#editBtn_" + treeNode.id);

                if (editBtn)
                    editBtn.bind("click", function () {
                        openEditResInit(treeNode);
                    });
            }

            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.id);
            if (btn)
                btn.bind("click", function () {
                    openAddResInit(treeNode);
                });
        }
    });
</script>
</html>